/*
 * 1. 모델 생성하기.
 * 2. data생성하기.
 * 3. 스토어 생성후 data를  store에 연결.
 * 4. 리스트 생성하기.
 * 5. Panel에 리스트 추가하기.
 */
Ext.setup({
	tabletStartupScreen:"./tabletStartupScreen.png",
	phoneStartupScreen:"./phoneStartupScreen.png",
	tabletIcon:"./tabletIcon.png",
	phoneIcon:"./phoneIcon.png",
	glossOnIcon: true,
	statusBarStyle:"black",
	fullscreen:true,
	preloadImages:[],
	scope:this,
   
	onReady: function() {
        /*
		 * 1. 모델 생성하기.
		 */
        Ext.regModel('mydata', {
            fields: ['name', 'url', 'size','lastmod']
        });
        /*
		 * 2. data생성하기.
		 */
    	var initData = function() {
    		var data = new Array();
    		for(var i = 0; i < 40; i++) {
    			var item = {};
    			item["name"]	= "name_" + i;
    			item["url"]		= "images/" + (1 + (i % 10)) + ".gif";
    			item["size"]	= Math.floor(Math.random() * 1000);
    			data.push(item);
    		}
    		return data;
    	};
    	var objData	= initData();
        /*
		 * 3. 스토어 생성후 data를 store에 연결.
		 */
        var objStore = new Ext.data.JsonStore({
            model: 'mydata',
            autoLoad:true,
            data:objData
        });
        console.log(objStore);
        /*
		 * 4.리스트 생성하기.
		 */
        var objList= new Ext.List({        
            store: objStore,
            selectedItemCls: "x-list-over",
            onItemDisclosure: true,
            /*
			 * 이런 방식으로 하면, 선언+이벤트까지 등록할 수 있답니다.
			 * onItemDisclosure: function(record, btn, index) {
			 * Ext.Msg.alert('Tap', 'Disclose more info for ' +
			 * record.get('name'), Ext.emptyFn);
			 *  },
			 */
            // 아이템 템플릿
            itemTpl: '<div class="contact">name : <strong>{name}</strong>, size : {size} </div>',
        });
        objList.on("disclose",function(record, btn, index){
            Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('name'), Ext.emptyFn);
        });
        /*
		 * 5. Panel에 리스트 추가하기.
		 */
        new Ext.Panel({
            fullscreen: true,  
            scroll:"vertical",
            layout:"fit",
            dockedItems: [ {
            	dock : 'top',
            	xtype: 'toolbar',
            	title: 'List Sample 1'
            } ],
            items:objList
        })
	}
});